<template>
    <div class="container">
        <div class="title">
            {{voteInfo.name}}
        </div>
        <div class="banner" @click="$router.push('/apply')">
        </div>
        <div class="sub-title" v-if="false">
            <img src="@/assets/huatong.png" class="cup" alt=""> <span style="margin-left: 0.468rem">嘉宾寄语</span>
        </div>
        <div class="main" v-if="false">
            <div  class="card-wrap">
                <div class="card" @click="playVideo('http://xinniuyunstore.test.upcdn.net/vote/1577185981992629.mp4')"
                     style="background: url('http://xinniuyunstore.test.upcdn.net/vote/zhuchi2.png') no-repeat;background-size:cover">
                    <div class="play"
                         style="display: flex;align-items: center;justify-content: center; border-radius: 0.468rem 0.468rem 0.468rem 0.468rem;">
                        <img src="@/assets/play.png" width="40px" height="40px" style="margin-top: 0.468rem;opacity: 0.2" alt="">
                    </div>
                </div>
                <div class="word-name">
                    <span style="width: 100%;text-align: center">主持人：杨吕</span>
                </div>
            </div>
            <div class="card-wrap">
                <div class="card" @click="playVideo('http://xinniuyunstore.test.upcdn.net/vote/1577185984962401.mp4')"
                     style="background: url('http://xinniuyunstore.test.upcdn.net/vote/zhuchi1.png') no-repeat;background-size:cover">
                    <div class="play"
                         style="display: flex;align-items: center;justify-content: center; border-radius: 0.468rem 0.468rem 0.468rem 0.468rem;">
                        <img src="@/assets/play.png" width="40px" height="40px" style="margin-top: 0.468rem;opacity: 0.3" alt="">
                    </div>
                </div>
                <div class="word-name">
                    <span style="width: 100%;text-align: center">主持人：璐璐姐姐</span>
                </div>
            </div>

        </div>
        <div class="voteColumns" v-for="value in voteInfo.voteColumns" :key="value.id">
            <div class="sub-title">
                <img src="@/assets/cup2x.png" class="cup" alt=""> <span style="margin-left: 0.2rem">{{value.name}}</span>
            </div>
            <transition-group class="main" name="list-complete" tag="div">
                <div class="card-wrap" v-for="(item,index) in value.voteContents" :key="item.id"
                     :isLast="(index == value.voteContents.length-1) && index%2==0?true:false">

                    <div class="card" @click="$router.push('/detail')"
                         :style="'background: url('+item.avatar+') no-repeat;background-size:cover'">
                        <!--<div class="play" style="display: flex;align-items: center;justify-content: center">
                            <img src="../../assets/play.png" width="40px" height="40px" style="margin-top: 1.17rem;opacity: 0.3" alt="">
                        </div>-->
                        <div class="text-wrap">
                            <div class="text">
                                <span>人气：{{10}}</span>
                                <span>总票数：{{item.ticketNumber}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="content-wrap">
                        <div class="content">
                            <div class="word-name">
                                <img v-if="index ==0" src="@/assets/NO1@2x.png"
                                     style="width: 1.77rem;height: 1.77rem;margin-right: 0.234rem" alt="">
                                <img v-else-if="index ==1" src="@/assets/NO2@2x.png"
                                     style="width: 1.77rem;height: 1.77rem;margin-right: 0.234rem" alt="">
                                <img v-else-if="index ==2" src="@/assets/NO3@2x.png"
                                     style="width: 1.77rem;height: 1.77rem;margin-right: 0.234rem" alt="">
                                <span class="no" v-else>{{index+1}}</span>
                                <span style="width: 8rem;text-align: start" :style="item.voteOptionName.length>8?'font-size:0.5rem':''">{{item.title}}</span>
                            </div>
                        </div>
                        <div style="display: flex;justify-content: space-between;align-items: center;width:100%">
                            <div class="name">
                                {{item.voteOptionName}}
                            </div>
                            <div class="button" @click="giveVote(item.id)">
                                {{'投票'}}
                            </div>
                        </div>
                    </div>
                </div>
            </transition-group>
        </div>


        <van-overlay :show="show" @click="show = false">
            <div style="display: flex;flex-direction: column;justify-content: center;align-items: center;height: 100%">
                <video ref="videos" playsinline :src="videoUrl" width="80%" webkit-playsinline height="auto" autoplay
                       controls></video>
            </div>
        </van-overlay>
        <!--<van-popup   :style="{ width: '100%',height: 'auto' }" v-model="show">

        </van-popup>-->
        <van-overlay :show="shareShow" @click="shareShow = false">
            <img src="@/assets/righttop.png" class="share-action"
                 style="width: 1.17rem;height: 1.17rem;position: absolute;right: 0.7rem;top: 0.7rem" alt="">
            <div style="color: white;font-size: 1.47rem;position: absolute;width:100%;text-align:center;top: 3.5rem">
                您今日投票机会已经没有啦
                <br>
                右上角分享到朋友圈
                <br>或发送给朋友
                <br>为您喜欢的选手投票吧
            </div>
        </van-overlay>
        <div style="position: fixed;bottom: 1.17rem;right: 1.17rem;height: 2.85rem">
            <img v-if="shareShow" @click="share" src="@/assets/share.png" style="width:2.34rem;height: 2.34rem" alt="">
        </div>
    </div>
</template>

<script>
    /* eslint-disable */
    import {
        Toast,
        Dialog,
        Overlay
    } from 'vant'
    import {getInfos, getSign, login, vote} from '@/api'

    export default {
        name: 'index',
        components: {
            [Toast.name]: Toast,
            [Dialog.name]: Dialog,
            [Overlay.name]: Overlay,
        },
        data () {
            return {
                videoUrl: '',
                show: false,
                unionid: '',
                code: this.$route.query.code,
                shareShow: false,
                dataList: [],
                voteInfo: {}
            }
        },
        created () {
            this.getInfo()
        },
        mounted () {
            window.addEventListener('scroll', this.handleScroll)
            // this.login()
        },
        methods: {
            /*handleScroll () {
              var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
              // console.log(scrollTop)
              if (scrollTop <= 100) {
                console.log('ok')
                this.shareShow = false
              } else {
                this.shareShow = true
              }
            },*/
            login () {
                login(this.code).then(res => {
                    console.log(res.code)
                    console.log('login()执行一次')
                    if (res.code === 1) {
                        this.unionid = res.data
                        localStorage.setItem('unionid', res.data)
                    }
                    if (res.code === -3) {
                        if (res.data.indexOf('http') > -1) {
                            // window.location.href = res.data
                        } else {
                            Toast('当前页面失效,请重新进入')
                        }
                    }
                })
            },
            getInfo () {
                getInfos().then(res => {
                    if(res.code === 1){
                        this.voteInfo = res.data
                    }

                })
            },
            giveVote (id) {
                if (this.unionid == null) {
                    this.unionid = localStorage.getItem('unionid')
                }
                vote(this.unionid, id).then(res => {
                    if (res.code === 1) {
                        Toast('投票成功!')
                        this.getInfo()
                    }
                    if (res.code === -1) {
                        Dialog.alert({
                            title: '请先关注"喵咪音乐"公众号',
                            message: '请在接下来的页面点击 喵咪音乐 的图标,选择关注,或者 微信公众号搜索 "喵咪音乐" 关注后即可继续投票'
                        }).then(() => {
                            // on close
                            window.location.href = 'https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MjM5NzQ4NzQ1Nw==&scene=124#wechat_redirect'
                        })
                    }
                    if (res.code === -2) {
                        Toast('您已经投过了')
                        this.shareShow = true
                    }
                    if (res.code === -3) {
                        Toast('请退出后重新进入')
                    }
                }).catch(() => {
                    Toast('请退出后重新进入')
                })
            },
            playVideo (videoUrl) {
                this.videoUrl = videoUrl
                this.show = true
                this.$refs.videos
                console.log(videoUrl)
            },
            jumpToDetail () {

            },
            share () {

            }
        }
    }
</script>

<style scoped>
    .container {

    }
    .no {
        font-size: 1.47rem;
        font-weight: bold;
        color: rgba(255, 206, 8, 1);
        margin-right: 0.7rem
    }

    .content-wrap {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        align-items: flex-start;
    }

    .content {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
    }

    .play {
        position: relative;
        top: 0;
        z-index: 1;
        background: rgba(0, 0, 0, 0.2);
        width: 10.53rem;
        height: 6.318rem;
        border-top-left-radius: 0.468rem;
        border-top-right-radius: 0.468rem;
    }

    .main {
        width: 95%;
        flex-wrap: wrap;
        justify-content: space-between;
        display: flex;

        padding: 0;
        margin: 0;
    }

    .button:active {
        background: rgb(208, 166, 8);
    }

    .button {
        width: 3.3rem;
        height: 1.4274rem;
        font-size: 0.91rem;
        /*background: rgba(255, 206, 8, 1);*/
        background: #d43c33;
        box-shadow: 0rem 0.234rem 0.3744rem 0rem rgba(147, 123, 12, 0.24);
        border-radius: 0.7137rem;
        text-align: center;
        line-height: 1.521rem;
        color: rgba(255, 255, 255, 1);
        font-weight: bold;
    }

    .button-wrap {
        display: flex;
        height: 0.408rem;
        flex-direction: column;
        justify-content: center;
    }

    .name {
        font-size: 0.77rem;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        /*margin-bottom: 0.28rem;*/
    }

    .card-wrap {
        /*width: 100%;*/
        transition: all 1s;
        margin-bottom: 0.468rem;
    }

    .card {
        /*background-color: white;*/
        background-size: cover;
        width: 10.53rem;
        height: 6.318rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        border-radius: 0.468rem;
        box-shadow: -5px 5px 16px -4px rgba(0, 0, 0, 0.1), 5px 5px 16px -4px rgba(0, 0, 0, 0.1);
    }

    .text-wrap {
        width: 10.53rem;
        height: 1.31rem;
        background: rgba(0, 0, 0, 0.3);
        border-radius: 0rem 0rem 0.2rem 0.2rem;
    }

    .word-name {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-top: 0.655rem;
        /*margin-left: 0.28rem;*/
        font-size: 0.1326rem;
        font-weight: bold;
        color: rgba(0, 0, 0, 1);

    }

    .text {
        width: 9.36rem;
        height: 1.31rem;
        margin: 0 auto;
        line-height: 1.31rem;
        font-weight: 200;
        color: rgba(255, 255, 255, 1);
        font-size: 0.65rem;
        display: flex;
        justify-content: space-between;
    }

    .title {
        margin-top: 1rem;
        width: 9.36rem;
        height: 1.19rem;
        font-size: 1.24rem;
        justify-self: flex-start;
        align-self: flex-start;
        font-weight: bold;
        color: rgba(0, 0, 0, 1);
    }

    .voteColumns {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .sub-title {
        width: 95%;
        margin-top: 1.47rem;

        margin-bottom: 0.585rem;
        display: flex;
        justify-content: flex-start;
        font-size: 1rem;
        font-weight: 400;
        color: rgba(0, 0, 0, 1);
    }

    .container {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .cup {
        width: 1.3572rem;
        height: 1.3572rem;
    }

    .banner {
        box-shadow: -5px 5px 16px -4px rgba(0, 0, 0, 0.1), 5px 5px 16px -4px rgba(0, 0, 0, 0.1);
        margin-top: 1.17rem;
        width: 22.23rem;
        height: 11.232rem;
        border-radius: 1.17rem;
        background: url("http://xinniuyunstore.test.upcdn.net/vote/bg-new.jpeg") no-repeat;
        /*background-size: cover;*/
        background-size: contain;
    }

    video {
        vertical-align: middle;
        object-fit: fill;
    }

    .share-action {
        animation: action infinite 1s;
    }

    @keyframes action {
        from {
            right: 2.34rem;
            top: 2.34rem;
        }
        to {
            right: 1.4rem;
            top: 0.9rem;
        }
    }

    .list-complete-item {
        transition: all 1s;
        display: inline-block;
        /*margin-right: 10px;*/
    }

    .list-complete-enter, .list-complete-leave-to
        /* .list-complete-leave-active for below version 2.1.8 */
    {
        opacity: 0;
        transform: translateY(30px);
    }

    .list-complete-leave-active {
        position: absolute;
    }
</style>
